<template>
  <view class="video-page" @touchstart="onTouchStart" @touchend="onTouchEnd">
    <!-- 顶部黑条 + 返回 -->
    <view class="top-bar">
      <image
        class="back-icon"
        src="https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-25/1756109453487.png?x-oss-process=image/resize,w_200,h_200"
        @click="goBack"
      />
    </view>

    <!-- 视频播放器 -->
    <video
      id="main-video"
      class="player"
      :src="videos[currentIndex]"
      :autoplay="true"
      :loop="false"
      :controls="false"
      :show-center-play-btn="false"
      objectFit="contain"
      @click="togglePlay"
      @play="onPlay"
      @pause="onPause"
      :muted="muted"
    ></video>

    <!-- #ifdef APP-PLUS -->
    <cover-view class="top-bar">
      <cover-image
        class="back-icon"
        src="https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-25/1756109453487.png?x-oss-process=image/resize,w_200,h_200"
        @click="goBack"
      />
    </cover-view>

    <cover-view class="center-controls">
      <cover-image
        class="control-btn"
        :src="isPlaying ? pauseIcon : playIcon"
        @click="togglePlay"
      />
    </cover-view>

    <cover-view class="right-controls">
      <cover-view class="speed-btn" @click="cycleSpeed"
        >{{ speeds[speedIndex] }}x</cover-view
      >
      <cover-image
        class="muted-btn"
        :src="muted ? muteIcon : unmuteIcon"
        @click="toggleMute"
      />
    </cover-view>

    <!-- 底部文案区域 -->
    <cover-view class="bottom-caption">
      <cover-view class="caption-title">{{
        captions[currentIndex].title
      }}</cover-view>
      <cover-view class="caption-desc">{{
        captions[currentIndex].desc
      }}</cover-view>
    </cover-view>
    <!-- #endif -->

    <!-- 中央控制按钮 -->
    <view class="center-controls">
      <image
        class="control-btn"
        :src="isPlaying ? pauseIcon : playIcon"
        @click.stop="togglePlay"
      />
    </view>

    <!-- 右侧播放速度按钮 -->
    <view class="right-controls">
      <view class="speed-btn" @click.stop="cycleSpeed"
        >{{ speeds[speedIndex] }}x</view
      >
      <image
        class="muted-btn"
        :src="muted ? muteIcon : unmuteIcon"
        @click.stop="toggleMute"
      />
    </view>

    <!-- 底部文案区域 -->
    <view class="bottom-caption">
      <text class="caption-title">{{ captions[currentIndex].title }}</text>
      <text class="caption-desc">{{ captions[currentIndex].desc }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref, nextTick, onMounted } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";

const videos = ref([
  "https://duyu-public-test.oss-cn-guangzhou.aliyuncs.com/940bfb29c3a41950870d5e27fd415e2a.mp4",
  "https://duyu-public-test.oss-cn-guangzhou.aliyuncs.com/77942e7c6c1fb6689e8d88b69663bd81.mp4",
  "https://duyu-public-test.oss-cn-guangzhou.aliyuncs.com/748b3df48e8fa8e90f04b4a2246b3dca.mp4",
  "https://duyu-public-test.oss-cn-guangzhou.aliyuncs.com/86dfd9aacbb5996a4f5da90ab78a35f2.mp4",
  "https://duyu-public-test.oss-cn-guangzhou.aliyuncs.com/6a7475f79929d693e919523ead49650e.mp4",
  "https://duyu-public-test.oss-cn-guangzhou.aliyuncs.com/e4dfa34d36536ec82aefe78a28986f67.mp4",
  "https://duyu-public-test.oss-cn-guangzhou.aliyuncs.com/a246ccd151ee684fd23f0462bca433f3.mp4",
  "https://duyu-public-test.oss-cn-guangzhou.aliyuncs.com/2129da5bb3dcd2f27fe684fa8bc00189.mp4",
  "https://duyu-ai.oss-cn-guangzhou.aliyuncs.com/h5/7109e5e8ba5834d58aa4af5340573785.mp4?OSSAccessKeyId=LTAIFLIjTL1ZomIf&Expires=61756117094&Signature=cKFCGb%2BP3cSCswECIww8Wrdt6fg%3D",
  "https://duyu-ai.oss-cn-guangzhou.aliyuncs.com/h5/247af9b52718d97c4ea2c9c4f5e55bfe.mp4?OSSAccessKeyId=LTAIFLIjTL1ZomIf&Expires=61756117078&Signature=d18IyQwXHzwIDu6FAopm7OFYYto%3D",
  "https://duyu-ai.oss-cn-guangzhou.aliyuncs.com/h5/7d9019160ff0e5a2a80d135907b4bc53.mp4?OSSAccessKeyId=LTAIFLIjTL1ZomIf&Expires=61756117108&Signature=4yu7oz30%2BzHe5f%2BZXlFURHCqD%2Bo%3D",
  "https://duyu-ai.oss-cn-guangzhou.aliyuncs.com/h5/a0f3f02346da87f81d6fc9cb6fdd3a68.mp4?OSSAccessKeyId=LTAIFLIjTL1ZomIf&Expires=60001756117458&Signature=hDB%2BUFXEbSsjwT7l40gCbwSghPE%3D",
  "https://duyu-ai.oss-cn-guangzhou.aliyuncs.com/h5/d12d4c4bb2628f55d1dd861aa55ba8aa.mp4?OSSAccessKeyId=LTAIFLIjTL1ZomIf&Expires=6001756117134&Signature=GCJPQI5eNuun0zUB4gotbPN%2BQj0%3D",
]);
const currentIndex = ref(0);
const muted = ref(true);
let startY = 0;
let ctx;
const isPlaying = ref(true);
const speeds = ref([1, 1.5, 2, 2.5, 3]);
const speedIndex = ref(0);
const playIcon =
  "https://cphimg.leyoo888.com/dev/upload/supplier/2025-09-01/1756712530823.png";
const pauseIcon = "";
const muteIcon =
  "https://cphimg.leyoo888.com/dev/upload/supplier/2025-09-01/1756706195382.png";
const unmuteIcon =
  "https://cphimg.leyoo888.com/dev/upload/supplier/2025-09-01/1756706679652.png";

const captions = ref([
  {
    title: "原神 | 角色演示",
    desc: "纳西坦：无根无忧",
  },
  {
    title: "原神 | 过场动画",
    desc: "最后的归宿！",
  },
  {
    title: "原神 | 更新",
    desc: "9.10号全服停服！ 十位角色建模重新打造，造就新一代的体系！",
  },
  {
    title: "原神 | 感动CG",
    desc: "泪目，时隔五年，原神最长的伏笔已经揭晓！班尼特，你一定是最幸运....",
  },
  {
    title: "和平精英 | 技术",
    desc: "开局一把刀，装备全靠骚，史上最强钢枪王！",
  },
  {
    title: "和平精英 | 完美吃鸡",
    desc: "队友全死光，决赛圈仅剩一人，如何突出重围吃鸡？",
  },
  {
    title: "和平精英 | 讨论",
    desc: "和平精英为什么被称为和平暖暖，背后的故事是什么？",
  },
  {
    title: "王者荣耀 | 技术流",
    desc: "技术流玩家，如何成为游戏中的王者？",
  },
  {
    title: "原神 | 黑暗重生",
    desc: "黑暗中重生的力量，让人震撼！",
  },
  {
    title: "翡翠货主啊牛 | 精彩赌玉",
    desc: "过程惊心动魄，看得人热血沸腾！",
  },
  {
    title: "翡翠货主啊牛 | 十五万赌玉",
    desc: "被无情的小老板摆了一道！",
  },
  {
    title: "翡翠货主啊牛 | 制作与重生",
    desc: "做了1000块玉！我发财啦！！！",
  },
  {
    title: "原神 | 命织觉醒",
    desc: "命织觉醒，让人震撼！",
  },
]);
// #ifdef H5
onMounted(() => {
  ctx = uni.createVideoContext("main-video");
});
// #endif

// #ifdef APP-PLUS
onLoad(() => {
  ctx = uni.createVideoContext("main-video");
});
// #endif

// #ifdef MP-WEIXIN
onLoad(() => {
  ctx = uni.createVideoContext("main-video");
});
// #endif

onShow(() => {
  nextTick(() => {
    ctx && ctx.play();
  });
});

const switchVideo = (direction) => {
  if (direction === "next") {
    if (currentIndex.value < videos.value.length - 1) currentIndex.value++;
    if (currentIndex.value === videos.value.length - 1) {
      currentIndex.value = 0;
    }
  } else if (direction === "prev") {
    if (currentIndex.value > 0) currentIndex.value--;
    if (currentIndex.value === 0) {
      currentIndex.value = videos.value.length - 1;
    }
  }
  nextTick(() => {
    if (ctx) {
      ctx.play();
      ctx.playbackRate && ctx.playbackRate(speeds.value[speedIndex.value]);
      isPlaying.value = true;
    }
  });
};
const onTouchStart = (e) => {
  startY = e.touches[0].clientY;
};
const onTouchEnd = (e) => {
  const endY = e.changedTouches[0].clientY;
  const deltaY = endY - startY;
  const threshold = 50;
  if (deltaY < -threshold) switchVideo("next");
  else if (deltaY > threshold) switchVideo("prev");
};

const togglePlay = () => {
  if (!ctx) return;
  if (isPlaying.value) ctx.pause();
  else ctx.play();
  isPlaying.value = !isPlaying.value;
};

const toggleMute = () => {
  if (!ctx) return;
  muted.value = !muted.value;
};

const onPlay = () => {
  isPlaying.value = true;
};
const onPause = () => {
  isPlaying.value = false;
};

const cycleSpeed = () => {
  if (!ctx) return;
  speedIndex.value = (speedIndex.value + 1) % speeds.value.length;
  ctx.playbackRate && ctx.playbackRate(speeds.value[speedIndex.value]);
};

const goBack = () => uni.navigateBack();
</script>

<style scoped>
.video-page {
  width: 100vw;
  height: 100vh;
  background: #000;
  overflow: hidden;
}

.player {
  width: 100%;
  height: 100%;
  z-index: 1;
}

.top-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background: rgba(0, 0, 0, 1);
  z-index: 2;
  display: flex;
  align-items: center;
}

.back-icon {
  width: 44rpx;
  height: 44rpx;
  margin-left: 24rpx;
}

.center-controls {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.control-btn {
  width: 120rpx;
  height: 120rpx;
  opacity: 0.85;
}

.muted-btn {
  width: 40rpx;
  height: 40rpx;
  opacity: 0.85;
}

.right-controls {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 6px;
  /* #ifdef APP-PLUS */
  text-align: center;
  /* #endif */
}

.speed-btn {
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  padding: 8rpx 16rpx;
  border-radius: 24rpx;
  font-size: 26rpx;
}

.bottom-caption {
  position: absolute;
  bottom: 40rpx;
  left: 24rpx;
  right: 24rpx;
  z-index: 2;
  color: #fff;
}

.caption-title {
  font-size: 32rpx;
  font-weight: 700;
  margin-bottom: 10rpx;
  display: block;
}

.caption-desc {
  font-size: 26rpx;
  opacity: 0.9;
  line-height: 1.5;
  display: block;
}
</style>
